<template>
  <div id="app">
    <div class="container">
      <!-- 页头 -->
      <div class="header">
        <h1>水情信息</h1>
      </div>
      <!-- 水位流量数据表格 -->
      <div class="data-section">
        <div class="table-container">

          <van-empty
            v-if="tableData.length === 0"
            description="暂无结果"
            class="empty-state"
          />
          <table v-else class="water-table">
            <thead>
              <tr>
                <th>站名</th>
                <th>时间</th>
                <th>水位(m)</th>
                <th>流量(m³/s)</th>
                <th>预报水深(m)</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tableData" :key="index" @click="handleRegimenItem(item)">
                <td class="station-name">{{ item.fName }}</td>
                <td>{{ item.fTime }}</td>
                <td>
                  <span v-if="item.fType == 0">
                    <span :class="item.swFlag=='↑'?'trend-up':(item.swFlag=='↓'?'trend-down':'trend-even')">{{ item.sw }}{{ item.swFlag }}</span>

                  </span>
                  <span v-else>-</span>
                </td>
                <td>
                  <div>{{ item.flowOut }}<span v-if="item.fType == 1">(出)</span></div>
                  <div>{{ item.flowIn }}<span v-if="item.fType == 1">(进)</span></div>
                </td>
                <td>{{ item.ybss }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPushRegimenList, getPushRegimenMenu } from '@/api/mobile/index'

export default {
  name: 'RegimenList',
  data() {
    return {
      userId: null,
      tableData: []
    }
  },
  async mounted() {
    // 从 URL 获取 code
    const urlParams = new URLSearchParams(window.location.search)
    const userId = urlParams.get('userId')

    if (userId) {
      this.userId = userId
    }

    // 初始化页面数据
    this.parseUrlParams()
    // this.initPage()
  },
  methods: {
    // 跳转到详情页
    handleRegimenItem(item) {
      this.$router.push({ path: `/regimen-detial?fName=${encodeURIComponent(item.fName)}` })
    },
    // 解析URL参数
    async parseUrlParams() {
      // 获取查询参数
      const queryString = window.location.search
      this.queryParams = queryString

      // 解析查询参数
      const params = new URLSearchParams(queryString)

      if (params.has('businessId')) {
        this.businessIdParam = params.get('businessId')
        const ids = this.businessIdParam.split(',')
        // 转换为数字数组
        this.businessIds = ids.map(id => parseInt(id.trim())).filter(id => !isNaN(id))
        const res = await getPushRegimenList({ userId: this.userId, businessId: this.businessIds.join(), messageId: 1 })
        this.tableData = res
      } else {
        const res = await getPushRegimenMenu()
        this.tableData = res
      }
    }
  }
}
</script>

<style scoped>
#app {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  min-height: 100vh;
}

.container {
}

/* 页头样式 */
.header {
  background: rgb(26, 41, 128) !important;
  color: white;
  padding: 25px 20px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.header h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 1px;
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 6px rgba(0,0,0,0.2);
  margin-bottom: 8px;
}

.header .subtitle {
  font-size: 16px;
  opacity: 0.9;
  position: relative;
  z-index: 2;
}

.header::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
  z-index: 1;
}

.date-display {
  font-size: 18px;
  font-weight: 600;
  color: #1a2980;
  display: flex;
  align-items: center;
}

.date-display .van-icon {
  margin-right: 8px;
  font-size: 20px;
}

.time-controls {
  display: flex;
  gap: 10px;
}

/* 数据表格样式 - 固定表头 */
.data-section {
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: white;
}

.table-container {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}

.water-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.water-table th {
  background: #f0f8ff;
  color: #1a5bb8;
  font-weight: 600;
  padding: 16px 12px;
  text-align: center;
  border-bottom: 2px solid #e6f0ff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.water-table td {
  padding: 14px 12px;
  text-align: center;
  border-bottom: 1px solid #f0f6ff;
}

.water-table tr:last-child td {
  border-bottom: none;
}

.water-table tr:hover {
  background-color: #f7fbff;
}

.station-name {
  font-weight: 600;
  color: #1a2980;
  text-align: left;
  padding-left: 20px;
}

.trend-up {
  color: #e74c3c;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}

.trend-down {
  color: #27ae60;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
}

.trend-even {
  color: #3498db;
  font-weight: bold;
}

.flow-detail {
  font-size: 13px;
  color: #7f8c8d;
}

/* 页脚样式 */
.footer {
  text-align: center;
  padding: 25px;
  color: #7f8c8d;
  font-size: 14px;
  border-top: 1px solid #f0f6ff;
  background: #f9fbfd;
}

.update-time {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  font-size: 13px;
}

.update-time .van-icon {
  margin-right: 6px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .water-table {
    font-size: 12px;
  }

  .water-table th,
  .water-table td {
    padding: 12px 8px;
  }

  .station-name {
    padding-left: 12px;
  }

  .header {
    padding: 20px 15px 20px;
  }

  .header h1 {
    font-size: 22px;
  }

  .time-controls {
    width: 100%;
    justify-content: space-between;
  }

}

@media (max-width: 480px) {
  .water-table {
    display: block;
    overflow-x: auto;
  }

  .table-container {
    overflow-x: auto;
  }

  .water-table th {
    position: sticky;
    left: 0;
  }
}
</style>
